<template>
	<div class="app-container">

		<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="88px">
			<el-form-item label="订单编号" prop="ddbh">
				<el-input v-model="queryParams.ddbh" placeholder="请输入订单编号" clearable size="small"
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="下单时间" prop="createTime">
				<el-date-picker type="daterange" v-model="queryParams.createTime" clearable size="small" style="width: 100%;"/>
			</el-form-item>
			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="exportOrder">导出</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="loading" :data="tastList">
			<el-table-column label="订单号" align="center" prop="ddbh" />
			<el-table-column label="任务节点名称" align="center" prop="name" />
			<el-table-column label="提报人" align="center" prop="assignee" />
			<el-table-column label="下单时间" align="center" prop="ordetDate" />
			<el-table-column label="审批时间" align="center" prop="createdDate" />
			<el-table-column label="审批用时" align="center" :formatter="stateFormat" />
			<el-table-column label="总价" align="center" prop="totalPrice"/>
			<el-table-column label="供应商" align="center" prop="suppliers"/>
	
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="historyFory(scope.row)">审批详情
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 审批对话框 -->
		<el-dialog :title="title" :visible.sync="open" v-if="open" width="500px" append-to-body>
			<leaveHistoryForm :businessKey="businessKey" v-if="'leave'==definitionKey" />

			<el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
				<el-form-item v-for="(domain, index) in form.formData" :label="domain.controlLable" :key="index">
					<el-radio-group v-model="domain.controlValue" v-if="'radio'==domain.controlType">
						<el-radio v-for="(defaults,indexd) in domain.controlDefault.split('--__--')" :label=indexd
							:key="indexd">{{defaults}}

						</el-radio>

					</el-radio-group>
					<el-input type="textarea" v-model="domain.controlValue" v-if="'textarea'==domain.controlType">
					</el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 查看详细信息话框 -->
		<el-dialog :title="title" :visible.sync="open2" width="500px" append-to-body>
			<leaveHistoryForm :businessKey="businessKey" v-if="open2" />
			<div slot="footer" class="dialog-footer">
				<el-button @click="open2=!open2">关闭</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {
		doListTask,
		formDataShow,
		formDataSave,
		dolistexcel
	} from "@/api/activiti/task";
	import leaveHistoryForm from "@/views/activiti/workflow/leave/leaveHistoryForm";
	import moment from 'moment'
	export default {
		name: "Leave",
		components: {
			leaveHistoryForm
		},
		data() {
			return {
				id: '',
				definitionKey: '',
				businessKey: '',
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 表格数据
				tastList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				open2: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					createTime: ['', '']
				},
				// 表单参数
				form: {
					formData: []
				},
				// 表单校验
				rules: {}
			};
		},
		created() {
			this.getList();
		},
		methods: {
			exportOrder(){
				this.queryParams.startTime = this.queryParams.createTime[0] ? moment(this.queryParams.createTime[0]).format('YYYY-MM-DD') : '';
				this.queryParams.endTime = this.queryParams.createTime[1] ? moment(this.queryParams.createTime[1]).format('YYYY-MM-DD') : '';
				dolistexcel(this.queryParams).then(response => {
					let downLoadEle = document.createElement("a");
					const href = "/activitis/common/download?fileName=" + encodeURI(response.msg); //  URL对象
					downLoadEle.href = href;
					downLoadEle.download = '已办列表.xlsx'; //指定下载的文件名
					document.body.appendChild(downLoadEle)
					downLoadEle.click(); // 模拟点击
					URL.revokeObjectURL(href); // 释放URL 对象
				});
			},
			//倒计时
			stateFormat(row, column) {
				var date1 = new Date(row.createdDate).getTime(); //开始时间
				var date2 = new Date(row.ordetDate).getTime(); //结束时间
				// <span>{{Date.parse(parseInt(scope.row.createdDate)/1000)}} -- {{7*24*60*60*1000}} ++ {{new Date().getTime()}}</span>
				const date3 = date1 - date2 //时间差的毫秒数
				//计算出相差天数
				const days = Math.floor(date3 / (24 * 3600 * 1000))
				//计算出小时数
				const leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
				const hours = Math.floor(leave1 / (3600 * 1000))
				//计算相差分钟数
				const leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
				const minutes = Math.floor(leave2 / (60 * 1000))
				//计算相差秒数
				const leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
				const seconds = Math.round(leave3 / 1000)
				let diffValue;
				if (days < 0) {
					return "审批超时"
				} else {
					if (days > 1) {
						diffValue = days + "天" + hours + "小时 "
					} else {
						diffValue = hours + "小时" + minutes + "分钟" + seconds + "秒"
					}
					return diffValue
				}
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},


			/** 查询列表 */
			getList() {
				this.loading = true;
				this.queryParams.startTime = this.queryParams.createTime[0] ? moment(this.queryParams.createTime[0]).format('YYYY-MM-DD') : '';
				this.queryParams.endTime = this.queryParams.createTime[1] ? moment(this.queryParams.createTime[1]).format('YYYY-MM-DD') : '';
				doListTask(this.queryParams).then(response => {
					this.tastList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},

			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.definitionKey = '',
					this.businessKey = '',
					this.form = {
						formData: [],
					};
				this.resetForm("form");
			},

			/** 审批按钮操作 */
			examineAndApprove(row) {
				console.log(row)
				this.reset();
				this.definitionKey = row.definitionKey;
				this.businessKey = row.businessKey;
				this.id = row.id;
				formDataShow(row.id).then(response => {
					// FormProperty_3qipis2--__!!radio--__!!审批意见--__!!i--__!!同意--__--不同意
					// FormProperty_0lffpcm--__!!textarea--__!!批注--__!!f--__!!null
					let datas = response.data;
					let formData = []
					for (let i = 0; i < datas.length; i++) {
						let strings = datas[i].split('--__!!')
						let controlValue = null
						let controlDefault = null
						switch (strings[1]) {
							case 'radio':
								controlValue = 0;
								controlDefault = strings[4]
								break;
								// default:
						}
						formData.push({
							controlId: strings[0],
							controlType: strings[1],
							controlLable: strings[2],
							controlIsParam: strings[3],
							controlValue: controlValue,
							controlDefault: controlDefault
						})
					}
					this.form.formData = formData;
					this.open = true;
					this.title = "审批";
				});
			},
			/** 提交按钮 */
			submitForm() {
				formDataSave(this.id, this.form.formData).then(response => {
					this.msgSuccess("审批成功");
					this.open = false;
					this.getList();
				});
			},
			/** 审批详情 */
			historyFory(row) {
				// this.businessKey = row.id
				// this.open2 = true
				// this.title = '审批详情'
				this.$router.push({
					path: "/activitiorder?id=" + row.ddbh + "&taskId=" + row.id + "&definitionKey=" + row
						.definitionKey + "&businessKey=" + row.businessKey + "&from=done"
				})

			},
		}
	};
</script>
